<template>
  <el-row :gutter="15">
    <el-form
      ref="elForm"
      :model="formData"
      :rules="rules"
      size="medium"
      label-width="100px"
    >
      <el-col :span="24">
        <el-form-item label="登录账号" prop="username">
          <el-input
            v-model="formData.username"
            placeholder="请输入登录账号"
            :maxlength="20"
            show-word-limit
            clearable
            prefix-icon="el-icon-user"
            :style="{ width: '100%' }"
          ></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="24">
        <el-form-item label="登录密码" prop="password">
          <el-input
            v-model="formData.password"
            placeholder="请输入登录密码"
            show-word-limit
            clearable
            prefix-icon="el-icon-lock"
            :style="{ width: '100%' }"
          ></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="24">
        <el-form-item label="确认密码" prop="repeat">
          <el-input
            v-model="formData.repeat"
            placeholder="请输入确认密码"
            clearable
            prefix-icon="el-icon-lock"
            :style="{ width: '100%' }"
          ></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="24">
        <el-form-item label="手机号" prop="phone">
          <el-input
            v-model="formData.phone"
            placeholder="请输入手机号"
            :maxlength="11"
            show-word-limit
            clearable
            prefix-icon="el-icon-mobile"
            :style="{ width: '100%' }"
          ></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="24">
        <el-form-item label="邮箱" prop="email">
          <el-input
            v-model="formData.email"
            placeholder="请输入邮箱"
            :maxlength="30"
            show-word-limit
            clearable
            prefix-icon="el-icon-s-promotion"
            :style="{ width: '100%' }"
          ></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="24">
        <el-form-item label="姓名" prop="name">
          <el-input
            v-model="formData.name"
            placeholder="请输入姓名"
            :maxlength="4"
            show-word-limit
            clearable
            :style="{ width: '100%' }"
          ></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="24">
        <el-form-item label="部门" prop="department">
          <el-select
            v-model="formData.department"
            multiple
            placeholder="请选择部门"
            clearable
            :style="{ width: '100%' }"
          >
            <el-option
              v-for="(item, index) in departmentOptions"
              :key="index"
              :label="item.label"
              :value="item.value"
              :disabled="item.disabled"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="24">
        <el-form-item label="职位" prop="role">
          <el-checkbox-group v-model="formData.role" size="medium">
            <el-checkbox
              v-for="(item, index) in roleOptions"
              :key="index"
              :label="item.value"
              :disabled="item.disabled"
              >{{ item.label }}</el-checkbox
            >
          </el-checkbox-group>
        </el-form-item>
      </el-col>
      <el-col :span="24">
        <el-form-item label="是否启用" prop="is_active" required>
          <el-switch
            v-model="formData.is_active"
            active-text="启用"
            :active-value="1"
            :inactive-value="0"
          >
          </el-switch>
        </el-form-item>
      </el-col>
      <el-col :span="24">
        <el-form-item label="系统管理员" prop="is_superuser" required>
          <el-switch
            v-model="formData.is_superuser"
            active-text="是"
            :active-value="1"
            :inactive-value="0"
          >
          </el-switch>
        </el-form-item>
      </el-col>
      <el-col :span="24">
        <el-form-item size="large">
          <el-button type="primary" @click="submitForm">提交</el-button>
          <el-button @click="resetForm">重置</el-button>
        </el-form-item>
      </el-col>
    </el-form>
  </el-row>
</template>
<script>
import { getAllDepartment } from '../../api/department'
import { getFilterRoleList } from '../../api/role'
import { addAdminUser } from '../../api/adminuser'
export default {
  data() {
    return {
      formData: {
        username: 'ceshiuser',
        password: 'admin@123',
        repeat: 'admin@123',
        phone: '17131719230',
        email: '123456@qq.com',
        name: '张巧',
        department: [],
        role: [],
        is_active: 1,
        is_superuser:0
      },
      rules: {
        username: [
          {
            required: true,
            message: '请输入登录账号',
            trigger: 'blur',
          },
          {
            pattern: /^[a-zA-Z0-9]{3,30}$/,
            message: '账号必须由3~30数字字母构成',
            trigger: 'blur',
          },
        ],
        password: [
          {
            required: true,
            message: '请输入登录密码',
            trigger: 'blur',
          },
          {
            pattern: /^.{8,20}$/,
            message: '请输入8~20位任意字符',
            trigger: 'blur',
          },
        ],
        repeat: [
          {
            required: true,
            message: '请输入确认密码',
            trigger: 'blur',
          },
        ],
        phone: [
          {
            required: true,
            message: '请输入手机号',
            trigger: 'blur',
          },
          {
            pattern: /^1(3|4|5|7|8|9)\d{9}$/,
            message: '手机号格式错误',
            trigger: 'blur',
          },
        ],
        email: [
          {
            required: true,
            message: '请输入邮箱',
            trigger: 'blur',
          },
          {
            pattern: /^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/,
            message: '邮箱格式错误',
            trigger: 'blur',
          },
        ],
        name: [
          {
            required: true,
            message: '请输入姓名',
            trigger: 'blur',
          },
          {
            pattern: /^[\u4e00-\u9fa5]{2,4}$/,
            message: '请输入2~4位中文',
            trigger: 'blur',
          },
        ],
        
        department: [
          {
            required: true,
            message: '请选择部门',
            trigger: 'change',
          },
        ],
        role: [
          {
            required: true,
            type: 'array',
            message: '请至少选择一个职位',
            trigger: 'change',
          },
        ],
      },
      departmentOptions: [],
      roleOptions: [
        {
          label: '请先选择部门',
          value: 0,
          disabled:true
        },
      ],
    }
  },
  watch: {
    'formData.department': async function (newval) {
      this.roleOptions=[]
      if(newval.length==0){
        this.roleOptions.push({label:'请选择部门',disabled:true})
        return
      }
      const roles = await getFilterRoleList('ids',JSON.stringify(newval))
      
      if(roles.length==0){
        this.roleOptions.push({label:'该部门暂无职位',disabled:true})
        return
      }      
      roles.forEach((item) => {
        this.roleOptions.push({
          label: `${item.role_name}(${item.department})`,
          value: item.id,
        })
      })
    },
  },
  created() {
    this.getDepartmentList()
  },
  methods: {
    async getDepartmentList() {
      const departments = await getAllDepartment()
      if (departments) {
        departments.forEach((item) => {
          this.departmentOptions.push({
            value: item.id,
            label: item.name,
          })
        })
      }
    },
    submitForm() { 
      this.$refs['elForm'].validate(async (valid) => {
        if (!valid) return
        const result = await addAdminUser(this.formData)
        if(result.id){
           this.$store.commit('handleTab','/adminuser/list')
            this.$message.success('添加用户成功！')
            this.$router.replace({name:'adminuser-list'})
        }
      })
    },
    resetForm() {
      this.$refs['elForm'].resetFields()
    },
  },
}
</script>
<style>
</style>
